<template>
  <div class="show">
    <div class="box">
            <h3>个人信息</h3>
            <div class="filter-container">
                <el-form ref="updatefrom" :model="updatefrom" :rules="updateRules" class="demo-ruleForm" label-position="right" label-width="100px">

                    <el-row>
                        <el-col :span="4">
                            <el-form-item label="账号" prop="account">
                                <el-input v-model="updatefrom.account"/>
                            </el-form-item>
                        </el-col>

                        <el-col :span="4">
                            <el-form-item label="密码" prop="password">
                                <el-input v-model="updatefrom.password" />
                            </el-form-item>
                        </el-col>
                    </el-row>


                    <el-row>
                        <el-col :span="4">
                            <el-form-item label="真实姓名" prop="name">
                                <el-input v-model="updatefrom.name" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="身份证号" prop="number">
                                <el-input v-model="updatefrom.number"/>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="4">
                            <el-form-item label="性别" prop="gender">
                                <el-select v-model="updatefrom.gender" placeholder="请选择">
                                    <el-option
                                            v-for="item in genderList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="年龄" prop="age">
                                <el-input v-model="updatefrom.age" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="4">
                            <el-form-item label="手机号码" prop="phone">
                                <el-input v-model="updatefrom.phone" />
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="具体地址" prop="address">
                                <el-input  v-model="updatefrom.address"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div style="padding-left:100px">
                  <el-button type="primary" class="butT" @click="setForm('updatefrom')">修改</el-button>
                  <el-button type="warning" class="butT" @click="infoInit()">重置</el-button>
                </div>
            </div>
        </div>
  </div>
</template>
     

<script>
export default {
  name: "show",
  data() {
    return {
      //修改用户表单数据
      updatefrom: {
        account: '',
        password: '',
        name: '',
        number: '',
        gender: '',
        phone: '',
        age: '',
        address: '',
      },
      //性别
      genderList: [{
          value: '0',
          label: '女'
      }, {
          value: '1',
          label: '男'
      }],
      //修改表单的验证规则
      updateRules: {
        account: [{ required: true, message: '用户账号为必填项', trigger: 'blur' }],
        password: [{ required: true, message: '用户密码为必填项', trigger: 'blur' }],
        name: [{ required: true, message: '用户昵称为必填项', trigger: 'blur' }],
        number: [{ required: true, message: '用户身份证号为必填项', trigger: 'blur' }],
        phone: [{ required: true, message: '用户电话为必填项', trigger: 'blur' }],
        address: [{ required: true, message: '用户地址为必填项', trigger: 'blur' }],
        age: [{ required: true, message: '用户年龄为必填项', trigger: 'blur' }],
        gender: [{ required: true, message: '用户性别为必选项', trigger: 'change' }],
      },
      // 输入的搜索内容
      input: "",
      //   添加对话框的显示隐藏
      adddialogVisible: false,
      //   添加表单的信息
      addfrom: {
        name: "",
        sex: "",
        poid: "",
        seid: "",
        birthday: "",
        other: ""
      },
    };
  },
  props: ["post"],
  created() {
    let userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'));//取值;
    this.queryUserById(userInfo[0].uid);
  },
  methods: {
    infoInit(){
      let userInfo = JSON.parse(window.sessionStorage.getItem('userInfo'));//取值;
      this.queryUserById(userInfo[0].uid);
      this.$message.success({
        duration: 800,
        message: "重置成功"
      });
    },
    //加载当前用户信息
    queryUserById(uid) {
      // 请求该用户的数据
      this.axios
        .get("/api/queryUserById", {
          params: {
            uid: uid
          }
        })
        .then(response => {
          this.updatefrom = response.data[0];
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 提交修改信息
    setForm(updatefrom) {
      this.$refs[updatefrom].validate(valid => {
        if (valid) {
          this.axios.post("/api/updateUser", this.updatefrom).then(res => {
            if (res.data.code !== 200) {
              return this.$message.error({
                duration: 800,
                message: "修改失败"
              });
            }else{
              this.$message.success({
                duration: 800,
                message: "修改成功"
              });
            }
          });
        } else {
          console.log("表单数据有错误");
          return false;
        }
      });
    },
  }
};
</script>


<style lang="less" scoped>
.show {
  .search {
    margin-top: 15px;
    .el-input {
      width: 300px;
      margin: 0 30px;
    }
    .el-button {
      width: 100px;
    }
  }
  .el-table {
    margin-top: 40px;
  }
}
</style>
